<template>
  <scroller class="page">
    <div class="field">
      <input class="input" type="text" v-model="info.name" placeholder="请输入收货人姓名" />
    </div>
    <div class="field">
      <input class="input" type="tel" v-model="info.mobile" placeholder="请输入联系电话" />
    </div>
    <div class="field">
      <textarea class="input" rows="3" v-model="info.address" placeholder="请输入详细地址"></textarea>
    </div>
    <div class="field">
      <input class="input" type="tel" v-model="info.postcode" placeholder="请输入邮政编码" />
    </div>
    <div class="delete-addr" @click="delAddress" v-if="addressId">
      <text class="delete-addr-text">删除地址</text>
    </div>
    <Footer />
    <div class="bottom" @click="submit">
      <text class="bottom-text">保存</text>
    </div>
  </scroller>
</template>
<script>
import Footer from '@/components/Footer';
import utils from './utils/utils.js';
const modal = weex.requireModule('modal');
const bcInfo = new BroadcastChannel('addressInfo');
export default {
  name: 'App',
  components: {
    Footer
  },
  data() {
    return {
      addressId: '',
      info: {}
    }
  },
  mounted() {
    var event = weex.requireModule('event');
    event.initData(JSON.stringify({'title':'收货地址'}), json => {
      var data = JSON.parse(json);
      this.addressId = data.addressId;
      this.init();
    })
  },
  methods: {
    init() {
      var url = '/yq/user/addressInfo';
      var params = {
        addressId: this.addressId
      };
      var success = res => {
        console.log(res);
        this.info = res.info;
      }
      var fail = res => {
        modal.toast({
          message: '获取数据失败',
          duration: 1
        })
      }
      utils.request(url, params, success, fail);
    },
    delAddress() {
      modal.confirm({
        message: '确认要删除该地址？',
        okTitle: '确认',
        cancelTitle: '取消'
      }, btn => {
        if (btn === '确认') {
          var url = '/yq/user/deleteAddress';
          var params = {
            addressId: this.addressId
          };
          var success = res => {
            if (res.status == 200) {
              // 给上一个页面发送消息
              bcInfo.postMessage('del');

              var p = {}
              weex.requireModule('event').onPop(JSON.stringify(p));

            } else {
              modal.toast({
                message: '删除失败',
                duration: 1
              })
            }
          }
          var fail = res => {
            modal.toast({
              message: '删除失败',
              duration: 1
            })
          }
          utils.request(url, params, success, fail);
        }
      })
    },
    submit() {
      if (!this.info.name) {
        modal.toast({
          message: '请输入姓名',
          duration: 3
        })
      }
      if (!this.info.mobile) {
        modal.toast({
          message: '请输入联系电话',
          duration: 3
        })
      }
      if (!this.info.address) {
        modal.toast({
          message: '请输入详细地址',
          duration: 3
        })
      }
      if (!this.info.postcode) {
        modal.toast({
          message: '请输入邮政编码',
          duration: 3
        })
      }
      var url = '/yq/user/updateAddress';
      var params = {
        addressId: this.addressId,
        address: this.info.address,
        mobile: this.info.mobile,
        name: this.info.name,
        postcode: this.info.postcode
      };
      var success = res => {
        if (res.status == 200) {
          // 给上一个页面发送消息
          bcInfo.postMessage('ok');

          var p = {}
          weex.requireModule('event').onPop(JSON.stringify(p));

        } else {
          modal.toast({
            message: '保存失败',
            duration: 1
          })
        }
      }
      var fail = res => {
        modal.toast({
          message: '保存失败',
          duration: 1
        })
      }
      utils.request(url, params, success, fail);
    }
  }
}
</script>
<style scoped>
text {
  font-size: 32px;
}

.page {
  padding-bottom: 150px;
}

.field {
  padding: 30px 50px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #888;
}

.input {
  font-size: 32px;
  width: 650px;
}

.delete-addr {
  margin-top: 30px;
  padding: 30px 50px;
  background-color: #f5f5f5;
}

.delete-addr-text {
  color: red;
}

.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #527a5f;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 110px;
}

.bottom-text {
  color: #fff;
}
</style>